<template>
    <div class="h-[6.875rem] px-[3rem] py-[2rem] flex justify-center items-center">
        <!-- 导航栏 -->
        <img class="w-[3.75rem] h-[3.75rem] mr-[2.5rem]" src="/public/images/hat.png" alt="">
        <div class="flex justify-between items-center gap-[1.25rem]">
            <div v-for="item in navItems" 
                 :key="item.id" 
                 class="cursor-pointer px-[0.5rem] font-[Inter] font-normal text-[1rem] leading-[1.5rem]" 
                 :class="{ 'bg-[#000] text-[#fff]': activeIndex === item.id }" 
                 @click="changeActiveIndex(item.id)">
                {{ item.name }}
            </div>
        </div>
        <slot name="right"></slot>
        <div v-if="getFirstLevelPath(route.path) === '/forum'" class="flex items-center gap-[0.28rem] text-[1rem] text-[#000] mx-[1rem]">
            <img src="/public/icon/notice.png" class="w-[1rem] h-[1rem]" alt="">
            3
        </div>
        <a href="#"
           v-if="!userStore.isLogin()"
           @click="modalStore.openLoginModal" 
           class="h-[2.375rem] px-[1.1rem] py-[0.45rem] rounded-[999px] bg-[#000] text-[#fff] ml-[0.5rem] text-[1rem]">
            登陆
        </a>
        <div class="dropdown-container" v-else
             @mouseenter="dropdownVisible = true"
             @mouseleave="dropdownVisible = false">
            <div class="avatar-wrapper flex items-center gap-[0.5rem] cursor-pointer ml-[1rem] focus:outline-none">
                <img :src="userStore.avatar" 
                     :class="['w-[2.375rem] h-[2.375rem] rounded-[50%] border-1 border-solid border-[#eae9e9]', {'avatar-expanded': dropdownVisible}]" 
                     alt="">
            </div>
            <div class="dropdown-menu" v-show="dropdownVisible">
                <div class="text-[1.25rem] text-[#000] text-center my-[0.5rem] mt-[2rem]">{{ userStore.nickname }}</div>
                <div class="px-[1rem]">
                    <div class="flex items-center justify-between gap-[0.5rem] mb-[0.5rem]">
                        LV1
                        <div class="w-full h-[0.25rem] bg-[#eee] rounded-[999px]">
                            <div class="w-[30%] h-full bg-[#000] rounded-[999px]"></div> 
                        </div>
                        LV2
                    </div>
                    <div class="flex items-center justify-between mb-[0.5rem]">
                        <span class="text-[0.875rem] text-[#666]">当前经验值:X 还需要Y升级到Z</span>
                    </div>
                </div>
                <div class="menu-item">
                    <div class="flex items-center justify-between gap-[0.5rem] w-full">
                        <div class="flex items-center gap-[0.5rem]">
                            <el-icon><User /></el-icon>
                            <span>个人中心</span>
                        </div>
                        <el-icon><ArrowRight /></el-icon>
                    </div>
                </div>
                <div class="menu-item" @click="openMyPosts">
                    <div class="flex items-center justify-between gap-[0.5rem] w-full">
                        <div class="flex items-center gap-[0.5rem]">
                            <el-icon><Document /></el-icon>
                            <span>我的帖子</span>
                        </div>
                        <el-icon><ArrowRight /></el-icon>
                    </div>
                </div>
                <div class="menu-item">
                    <div class="flex items-center justify-between gap-[0.5rem] w-full">
                        <div class="flex items-center gap-[0.5rem]">
                            <el-icon><Folder /></el-icon>
                            <span>我的项目</span>
                        </div>
                        <el-icon><ArrowRight /></el-icon>
                    </div>
                </div>
                <div class="menu-item">
                    <div class="flex items-center justify-between gap-[0.5rem] w-full">
                        <div class="flex items-center gap-[0.5rem]">
                            <el-icon><ShoppingCart /></el-icon>
                            <span>我的订单</span>
                        </div>
                        <el-icon><ArrowRight /></el-icon>
                    </div>
                </div>
                <div class="menu-item">
                    <div class="flex items-center justify-between gap-[0.5rem] w-full">
                        <div class="flex items-center gap-[0.5rem]">
                            <el-icon><Medal /></el-icon>
                            <span>我的勋章</span>
                        </div>
                        <el-icon><ArrowRight /></el-icon>
                    </div>
                </div>
                <div class="menu-item">
                    <div class="flex items-center justify-between gap-[0.5rem] w-full">
                        <div class="flex items-center gap-[0.5rem]">
                            <el-icon><SwitchButton /></el-icon>
                            <span>退出登录</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { useModalStore } from '@/stores/modal'
import { useRoute, useRouter } from 'vue-router'
import { getFirstLevelPath } from '@/utils/route'
import { useUserStore } from '@/stores/user'
import { ArrowRight, User, Document, Folder, ShoppingCart, Medal, SwitchButton } from '@element-plus/icons-vue'

const modalStore = useModalStore()
const userStore = useUserStore()
const dropdownVisible = ref(false)

console.log('userStore.isLogin:',userStore.isLogin())
interface NavItem {
    id: string
    name: string
    path: string
}
const navItems: NavItem[] = [
    { id: '1', name: '首页', path: '/' },
    { id: '2', name: '论坛', path: '/forum' },
    { id: '3', name: '项目', path: '/project' },
    { id: '4', name: '商城', path: '/shop' }
]

const route = useRoute()
const router = useRouter()

const activeIndex = ref(navItems.find(item => item.path === getFirstLevelPath(route.path))?.id || '1')

// 监听路由变化，自动切换高亮
watch(
  () => route.path,
  (newPath) => {
    const firstLevelPath = getFirstLevelPath(newPath)
    const found = navItems.find(item => item.path === firstLevelPath)
    activeIndex.value = found ? found.id : '1'
  }
)

// 点击导航时跳转
const changeActiveIndex = (index: string) => {
  const nav = navItems.find(item => item.id === index)
  if (nav) {
    router.push(nav.path)
  }
}

// 打开我的帖子
const openMyPosts = () => {
  // router.push('/forum/my-posts')
  window.open(`/forum/my-posts`, '_blank')
}

</script>
<style lang="scss" scoped>
.header {
    
    height: 6.875rem;
    padding: 2rem  3rem;

    display: flex;
    justify-content: center;
    align-items: center;

    .hat {
        width: 3.75rem;
        height: 3.75rem;
        margin-right: 2.5rem;
    }

    .nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1.25rem;
        .nav-item {
            cursor: pointer;
            padding: 0 0.5rem;
            font-family: Inter;
            font-weight: 400;
            font-size: 1rem;
            line-height: 1.5rem;
            letter-spacing: 0%;

        }

        .active {
            background: #000;
            color: #fff;
        }
    }
   
    .login{
        height: 2.375rem;
        padding: 0.45rem 1.1rem;
        border-radius: 999px;
        background: #000;
        color: #fff;
        margin-left: 0.5rem;
        font-size: 1rem;
    }
    .notice{
        display: flex;
        align-items: center;
        gap: 0.28rem;
        font-size: 1rem;
        color: #000;
        margin:0 1rem ;
        img{
            width: 1rem;
            height: 1rem;
        }
        
    }
}

/* 自定义下拉菜单样式 */
.dropdown-container {
  position: relative;
}

.avatar-wrapper {
  position: relative;
}

.avatar-wrapper img {
  transition: all 0.3s ease;
}

.avatar-expanded {
  transform: scale(2) translateY(15px);
  z-index: 2100;
  border: none;
}

.dropdown-menu {
  position: absolute;
  top: 2.5rem;
  left: 45%;
  transform: translateX(-45%);
  width: 14.375rem;
  background: white;
  border-radius: 0.5rem;
  box-shadow: 0 0.125rem 0.75rem 0 rgba(0, 0, 0, 0.1);
  z-index: 2000;
  padding-top: 1.5rem;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.menu-item {
  padding: 0.5rem 1rem;
  cursor: pointer;
}

.menu-item:hover {
  background-color: #f5f5f5;
}

</style>